<script setup>
import { ref, onMounted, watch, onBeforeUnmount, nextTick, computed } from 'vue';
import { getSimplePostApi, getAllSimplePost } from '@/apis/simplePost';
import { useRoute } from 'vue-router';
import { useWebSocket } from '@vueuse/core'
import { useUserStore } from "@/store/user";
import { ElMessage } from 'element-plus';
import { getTodayChatMessageApi, chatReportApi } from "@/apis/home";
import CryptoJS from 'crypto-js';
import { getSignInApi, SignInApi } from '@/apis/signIn'


const route = useRoute();
const userStore = useUserStore()

/* 输入框的内容 */
const messageText = ref('');

/* 聊天框的ref */
const message = ref(null);

/* 消息列表 */
const homeMessageList = ref([]);

// 底层弹出框控制
const drawer2 = ref(false);



// #region 经验表的控制，计算属性
const experience = computed(() => {
  return userStore.experience / userStore.userInfo.needExperienceValue * 100
})
// #endregion


/* 签到 */
const sign = ref(false)
/* 获取签到信息 */
const getSignIn = async () => {
  const res = await getSignInApi(userStore.userInfo.id)
  sign.value = res.data
}


const signIn = async () => {

  const res = await SignInApi(userStore.userInfo.id)

  ElMessage.success(res.data)

  /* 再次获得签到状态 */
  await getSignIn(userStore.userInfo.id)

  /* 获得经验值 */
  await userStore.getExperience()
}


// #endregion


// #region 格式化时间
function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

// #endregion


// #region websocket代码

// 创建 WebSocket 连接
const { send, status, data, open, close } = useWebSocket('ws://8.134.78.60:8080/chat/' + userStore.userInfo.id);



// 监听 WebSocket 消息
watch(data, (newData) => {
  // console.log(newData);


  if (newData) {

    if (newData.slice(0, newData.lastIndexOf(',')) === 'ERROR') {
      ElMessage.error('发言不合规，请文明发言')
      homeMessageList.value.pop()

    } else if (newData.slice(0, newData.lastIndexOf(',')) === 'REFUSE') {
      ElMessage.error('您因为违反社区规定被禁言，今日无法发言。今天 00:00会自动解封')
      homeMessageList.value.pop()
    }
    else {

      const lastCommaIndex = newData.lastIndexOf(','); // 最后一个逗号的索引
      const secondLastCommaIndex = newData.lastIndexOf(',', lastCommaIndex - 1); // 倒数第二个逗号的索引
      const threeLastCommaIndex = newData.lastIndexOf(',', secondLastCommaIndex - 1); // 倒数第三个逗号的索引
      const message = newData.slice(0, threeLastCommaIndex); // 截取消息内容
      const sendId = parseInt(newData.slice(lastCommaIndex + 1)); // 截取发送者id
      // console.log(sendId);

      const isQunfa = newData.slice(threeLastCommaIndex + 1, secondLastCommaIndex); // 截取是否群发
      if (isQunfa === 'q') {
        receive(message, sendId)

      }


    }

  }
});



/* 发送消息 */
function sendMessage() {
  if (messageText.value.trim()) {
    homeMessageList.value.push({
      sendId: userStore.userInfo.id,
      text: messageText.value,
      time: formatDate(new Date())
    });

    /* 发送消息  */
    send(messageText.value.trim() + "q");

    messageText.value = '';

    nextTick(() => {
      smoothScrollToBottom()
    });
  }
}


/* 接收消息 */
function receive(data, sendId) {
  /* sendId 是发送者的id, props.selectedChatObject.receiveId是当前聊天者的id。这两个一样才接收*/

  if (data, sendId !== userStore.userInfo.id) {
    homeMessageList.value.push({
      sendId,
      text: data,
      time: formatDate(new Date())
    });

  }


  nextTick(() => {
    smoothScrollToBottom()
  });
}



// #region 举报代码
const key = CryptoJS.enc.Utf8.parse("1234567890123456"); // 16字节密钥
const iv = CryptoJS.enc.Utf8.parse("1234567890123456"); // 16字节IV
const handleReport = async (sendId, message) => {
  /* 加密发送者id*/
  const encrypted = CryptoJS.AES.encrypt(sendId, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });



  const res = await chatReportApi(encrypted.toString(), message);

  ElMessage.success(res.data)

}
// #endregion


// #region 弹窗代码
const drawer = ref(false);

// #endregion



const PostSimpleList = ref(null)
onMounted(async () => {

  /* 不懂为什么不用open(),也能连接到websocket */
  // open();

  /* 获得首页的公共聊天信息 */
  const result = await getTodayChatMessageApi()

  homeMessageList.value = result.data;

  if (message.value) {
    nextTick(() => {
      smoothScrollToBottom()
    })

  }

  /* 因为是全部热度对比，不是某一个分类的。 */
  const res = await getAllSimplePost()
  PostSimpleList.value = res.data

  /* 获得签到状态 */
  await getSignIn(userStore.userInfo.id)

});


// #region 跳转到底部
/* 丝滑滚动到消息列表底部，适用于聊天时 */
function smoothScrollToBottom() {

  // 平滑滚动到消息容器的底部
  message?.value.scrollTo({
    top: message.value.scrollHeight, // 滚动到内容的底部
    behavior: 'smooth'                  // 设置平滑滚动
  });
}

// #endregion


/* 是否是手机端 */
const isMobile = computed(() => {
  return window.innerWidth <= 768
})

</script>

<template>
  <div class="container-home">

    <!-- 介绍 or 经验 -->
    <el-card class="card">
      <div v-if="isMobile" class="experience">


        <!-- 提示文字 -->
        <el-tooltip class="box-item" effect="dark"
          :content="`${userStore.experience} / ${userStore.userInfo.needExperienceValue}`" placement="bottom">
          <!-- 经验进度条 -->
          <el-progress class="progress-bar " color="rgb(184,214,255)" :show-text="false" text-inside :stroke-width="15"
            :percentage="experience"></el-progress>
        </el-tooltip>


        <!-- 需要点击然后出现一个弹窗来提示经验如何获得 -->
        <!-- 称号 -->
        <div class="level" @click="drawer2 = true">
          <span>{{ userStore.userInfo.chenghao }}</span>
          <svg-icon :name="userStore.userInfo.icon" color="blue" />
        </div>

        <!-- 签到按钮.签到后就改颜色 -->
        <el-button :disabled="sign" @click="signIn" type="primary">{{ sign ? '已签到' : '签到'
          }}</el-button>



        <!-- 经验介绍 -->
        <el-drawer class="experience-dialog" size="70%" :show-close="false" v-model="drawer2" direction="btt">
          <template #header style="margin-bottom: 0;">
            <h4>经验介绍</h4>
          </template>
          <template #default>
            <div class="experience-content">
              <h4>经验说明：</h4>
              <p>每日签到可获得5经验</p>
              <!-- <h4>回帖说明：</h4> -->
              <p>每日首次评论可获得5经验。第2-5次可获得3经验，评论超过5次今日将不再获得经验。</p>
              <!-- <h4>发帖说明：</h4> -->
              <p>每日首次发帖可获得10经验。第1-3次可获得5经验，发帖超过3次今日将不再获得经验。</p>
              <p>每日00:00刷新</p>

              <h4>等级说明：</h4>
              <p>本贴吧最高五级。每级的所需的经验值是不同的，可点击经验值进度条查看。</p>

              <h4>特权说明：</h4>
              <p>每个级别都会获得不同的称号与图标</p>

            </div>
          </template>
        </el-drawer>

      </div>

      <div v-else class="introduce">
        <div class="title">
          <span>论坛功能介绍</span>
        </div>
        <div class="content">
          <p>本论坛适配手机端和电脑端，功能丰富，来试试吧！</p>
          <p><span>1</span>. 首页：首页有热门帖子、公共聊天（详情可以点击公共聊天标题的小灯泡了解哦）。</p>
          <p><span>2</span>. 分类：本论坛有多个分类，可以根据自己的兴趣来选择。在分类中，还可以选择查看回复优先、发布优先、精华帖子。</p>
          <p><span>3</span>. 经验值：本论坛设立了经验值系统，详细可点击您的称号查看。</p>
          <p><span>4</span>. 帖子：您可以点赞与收藏帖子（在帖子的顶部信息栏中）。</p>
          <p><span>5</span>. 回帖：您可以对帖子进行回复,有敏感词检测，敏感词将会转为*号，您可以@您的关注。</p>
          <p><span>6</span>. 举报：您可以举报违规发言，我们核实后将删除评论。</p>
          <p><span>7</span>. 发帖：发帖也会有敏感词检测，也会通过审核。无误后才能展示出来。</p>
          <p><span>8</span>. 自己的个人中心：您可以在自己个人中心查看并修改个人信息，管理您的帖子与收藏。</p>
          <p><span>8</span>. 他人的个人中心：您可以查看他人的个人信息。关注他或者和他私信。也可以查看他的帖子与收藏（如果他公开了的话）。</p>
          <p><span>9</span>. logo: 可以点击logo进入首页。</p>
          <p><span>10</span>. 消息中心：有新消息会出现小红点哦，评论追评这些点击可滑动到对应的帖子会位置。</p>
          <p><span>11</span>. 私信：您可以进入他人主页主动和他人发送私信，他人给你发送信息时会有提示。可拉黑用户，将不会再接收该用户的私信。</p>
        </div>
      </div>


    </el-card>






    <!-- 聊天卡片 -->
    <el-card class="card">
      <div>
        <div class="title">
          <span>大家都在聊</span>
          <svg-icon name="tishi" class="svg" @click="drawer = true" />
        </div>

        <!-- 弹窗 -->
        <el-drawer size="50%" v-model="drawer" title="提示" direction="btt" class="drawer">
          <p>欢迎来到公共聊天框！请遵守社区规范，友善交流。</p>
          <p>本聊天室不会暴露您的任何隐私信息。</p>
          <p>在这里您可以与其他所有用户实时聊天，使用输入框发送消息！。</p>
          <p>请勿发送敏感信息或违反规定的内容,含有敏感词的消息将会被删除，感谢您的配合！</p>
          <p>消息会在每天的00:00全部清空。</p>
          <p>如发现有违规发言，可点击用户头像及时举报，我们将严惩不贷。</p>
        </el-drawer>

        <div class="chat-room">


          <div class="chat-window" v-if="homeMessageList !== null">



            <div class="messages" ref="message">
              <!-- <el-scrollbar height="500px"> -->
              <div v-for="(message, index) in homeMessageList" :key="index"
                :class="{ 'sent': Number(message.sendId) === userStore.userInfo.id, 'received': Number(message.sendId) !== userStore.userInfo.id }">

                <!-- 消息内容 -->
                <p class="time">{{ message.time }}</p>
                <div v-if="Number(message.sendId) === userStore.userInfo.id" class="text-avatar">
                  <span class="text">{{ message.text }}</span>
                  <img :src="'https://via.placeholder.com/1'" class="avatar" />
                </div>

                <div class="text-avatar" v-else>
                  <div class="text-container">
                    <img :src="'https://via.placeholder.com/1'" class="avatar" />
                    <svg-icon @click="handleReport(message.sendId, message.text)" name="jubao" class="svg"></svg-icon>
                  </div>
                  <span class="text">{{ message.text }}</span>
                </div>


              </div>

            </div>

            <!-- 输入框 -->
            <div class="input-area">
              <input type="text" v-model="messageText" @keyup.enter="sendMessage" placeholder="请输入消息，有疑问可点击标题小灯泡！" />
              <button @click="sendMessage">发送</button>
            </div>
          </div>

        </div>

      </div>
    </el-card>

    <!-- 帖子卡片 -->
    <el-card class="card post">
      <div class="title"><span>热帖</span></div>
      <!-- 获取今日热度最高的帖子 -->
      <SimplePost v-for="(item, index) in PostSimpleList" :index="index" :simplePostData="item"></SimplePost>
    </el-card>



    <!-- 手机端介绍 -->
    <el-card class="card" v-if="isMobile">
      <div class="introduce">
        <div class="title">
          <span>论坛功能介绍</span>
        </div>
        <div class="content">
          <p>本论坛适配手机端和电脑端，功能丰富，来试试吧！</p>
          <p><span>1</span>. 首页：首页有热门帖子、公共聊天（详情可以点击公共聊天标题的小灯泡了解哦）。</p>
          <p><span>2</span>. 分类：本论坛有多个分类，可以根据自己的兴趣来选择。在分类中，还可以选择查看回复优先、发布优先、精华帖子。</p>
          <p><span>3</span>. 经验值：本论坛设立了经验值系统，详细可点击您的称号查看。</p>
          <p><span>4</span>. 帖子：您可以点赞与收藏帖子（在帖子的顶部信息栏中）。</p>
          <p><span>5</span>. 回帖：您可以对帖子进行回复,有敏感词检测，敏感词将会转为*号，您可以@您的关注。</p>
          <p><span>6</span>. 举报：您可以举报违规发言，我们核实后将删除评论。</p>
          <p><span>7</span>. 发帖：发帖也会有敏感词检测，也会通过审核。无误后才能展示出来。</p>
          <p><span>8</span>. 自己的个人中心：您可以在自己个人中心查看并修改个人信息，管理您的帖子与收藏。</p>
          <p><span>8</span>. 他人的个人中心：您可以查看他人的个人信息。关注他或者和他私信。也可以查看他的帖子与收藏（如果他公开了的话）。</p>
          <p><span>9</span>. logo: 可以点击logo进入首页。</p>
          <p><span>10</span>. 消息中心：有新消息会出现小红点哦，评论追评这些点击可滑动到对应的帖子会位置。</p>
          <p><span>11</span>. 私信：您可以进入他人主页主动和他人发送私信，他人给你发送信息时会有提示。可拉黑用户，将不会再接收该用户的私信。</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style lang='scss' scoped>
//公用样式


.title {
  text-align: center;
  font-size: 1.8rem;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;

  & span {
    color: rgb(255, 102, 0);
  }


  .svg {
    & :hover {
      cursor: pointer;
    }
  }

}

.drawer {
  & p {
    margin-bottom: 10px;
  }
}

//电脑端样式
@media screen and (min-width: 768px) {
  .container-home {
    display: flex;
    justify-content: space-evenly;

    .introduce {
      // border: 1px solid red;
      width: 18vw;


      .content {
        height: 63vh;
        overflow: scroll;

        &>p {
          margin-top: 10px;

          &>span {

            color: red;
          }
        }

        /* 隐藏滚动条 */
        &::-webkit-scrollbar {
          display: none;
          /* 对于 Chrome, Safari 和 Opera */
        }

        &::-webkit-scrollbar-thumb {
          background-color: transparent;
          /* 背景颜色 */
        }



      }
    }

    .card {
      height: 73vh;
      margin-top: 50px;
    }

    &>.card:nth-child(2) {
      color: black;
      flex: 0.8;

    }

    .post {
      width: 20vw;
    }
  }

  .chat-room {


    .chat-window {

      // width: 30vw;
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 64vh;
    }


    .messages {
      flex: 1;
      padding: 10px;
      overflow: auto;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      // min-height: 500px;
      // border: 1px solid red;
    }

    /* 隐藏滚动条 */
    .messages::-webkit-scrollbar {
      display: none;
      /* 对于 Chrome, Safari 和 Opera */
    }

    .messages {
      /* IE 和 Edge */
      -ms-overflow-style: none;

      /* Firefox */
      scrollbar-width: none;
    }

    .messages .received {
      padding-top: 50px;
      border-radius: 5px;
      width: 90%;

      .time {
        text-align: center;
        margin-bottom: 20px;
        color: #999;
      }

      .text-avatar {
        display: flex;
        align-items: center;
        justify-content: start;
        position: inherit;

        .text {
          background: #d9edf7;
          padding: 10px;
          border-radius: 5px;
        }

        .text-container {
          position: relative;

          &:hover {
            cursor: pointer;

            .svg {
              display: block;
            }
          }

          .avatar {
            margin-right: 10px;
            border-radius: 50%;
            width: 40px;
            height: 40px;

          }

          .svg {
            position: absolute;
            top: 50%;
            left: 40%;
            transform: translate(-50%, -50%);
            display: none;
          }

        }

      }

    }

    .messages .sent {
      padding-top: 50px;
      border-radius: 5px;
      width: 100%;
      /* border: 1px solid red; */

      .time {
        text-align: center;
        margin-bottom: 20px;
        color: #999;
      }

      .text-avatar {
        display: flex;
        align-items: center;
        justify-content: end;

        .text {
          background: #d9edf7;
          padding: 10px;
          border-radius: 5px;
        }

        .avatar {
          width: 40px;
          height: 40px;
          margin-left: 10px;
          border-radius: 50%;
        }
      }


    }

    .input-area {
      display: flex;
      background-color: #f9f9f9;
    }

    .input-area input {
      flex: 1;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .input-area button {
      padding: 10px;
      margin-left: 5px;
      border: none;
      background-color: rgb(64, 158, 255);
      color: white;
      border-radius: 5px;
      cursor: pointer;
    }
  }
}

//移动端样式
@media screen and (max-width: 768px) {

  .card {
    margin-top: 10px;
  }

  .container {
    width: 100%;

    .experience {
      display: flex;
      align-items: center;
      // height: 20px;

      .font {
        font-size: 1.5rem;
      }


      .progress-bar {
        flex: 1;
        margin-left: 10px;
      }


      .level {
        border: 1px solid rgb(126, 127, 128);
        height: 30px;
        width: 90px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 0 10px;
        color: rgb(255, 106, 0);
      }


    }

    // 底层经验介绍弹出框
    .experience-content {
      color: blue;
      font-size: 18px;

      &>h4 {
        margin-bottom: 5px;
        font-size: 21px;
        color: rgb(255, 115, 0);
      }

      &>h4:not(:first-child) {
        margin-top: 30px;
      }

      >p {
        margin-bottom: px;
      }
    }

    /* 聊天室 */
    .chat-window {
      height: 60vh;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .messages {
      flex: 1;
      overflow-y: auto;
      background-color: #fff;
      // display: flex;
      // flex-direction: column;
      // max-height: 100000px;

    }

    .messages .received {
      padding-top: 50px;
      border-radius: 5px;
      width: 90%;

      .time {
        text-align: center;
        margin-bottom: 20px;
        color: #999;
      }

      .text-avatar {
        display: flex;
        align-items: center;
        justify-content: start;

        .text {
          background: #d9edf7;
          padding: 10px;
          border-radius: 5px;
        }

        .avatar {
          margin-right: 10px;
          border-radius: 50%;
          width: 40px;
          height: 40px;
        }
      }

    }

    .messages .sent {
      padding-top: 50px;
      border-radius: 5px;
      width: 100%;

      .time {
        text-align: center;
        margin-bottom: 20px;
        color: #999;
      }

      .text-avatar {
        display: flex;
        align-items: center;
        justify-content: end;

        .text {
          background: #d9edf7;
          padding: 10px;
          border-radius: 5px;
        }

        .avatar {
          width: 40px;
          height: 40px;
          margin-left: 10px;
          border-radius: 50%;
        }
      }


    }

    .input-area {
      display: flex;
      background-color: #f9f9f9;
      margin-top: 10px;
    }

    .input-area input {
      flex: 1;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .input-area button {
      padding: 10px;
      margin-left: 5px;
      border: none;
      background-color: rgb(64, 158, 255);
      color: white;
      border-radius: 5px;
      cursor: pointer;
    }
  }


  /* 手机端介绍 */
  .introduce {
    // border: 1px solid red;


    .content {

      &>p {
        margin-top: 10px;

        &>span {
          color: red;
        }
      }
    }
  }
}
</style>